<template>
	<view class="myEmployeesPage">
		<view class="myEmployeesTop">
			<view class="search-content">

				<image class="search-img" src="../../static/会员卡管理端/组合 405.png" mode=""></image>
				<input placeholder="请输入员工手机号" v-model="searchVal" @input="changeInput" @confirm="changeSearch"
					style="width: auto;line-height: 1em; " placeholder-style="font-size:28rpx;color:#A1A1A1;" />
				<image v-if="searchVal" class="icon_close" src="/static/delect.png" @click="close"></image>
			</view>
		</view>
		<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
			@up="upCallback" :up="upOption" :down="downOption">
			<block v-for="(item,index) in list" :key="index">
				<view class="myEmployeesList">
					<view class="flex-between padding-bottom_20rpx border-bottom-ECECEC">
						<view class="flex">
							<!-- <image class="image" src="../../static/会员卡管理端/组合 551.png" mode=""></image> -->
							<view class="flex-columns-center margin-left_30rpx">
								<text class="font-weight_bold margin-bottom_10rpx"
									style="font-size: 30rpx;">{{item.name}}</text>

								<text
									style="color: rgb(153, 153, 153);font-size: 24rpx;text-align: left;">手机号：{{item.phone}}
								</text>
							</view>
						</view>
					<!-- 	<view class="flex-column-end margin-left_30rpx">
							<text class="font-weight_bold margin-bottom_10rpx"
								style="font-size: 30rpx;color: rgb(255, 51, 38);">+￥2000.00</text>

							<text style="color: rgb(153, 153, 153);font-size: 24rpx;text-align: left;">今日收银
							</text>
						</view> -->
					</view>
					<view class="   ">
						<view class="flex-between  border-bottom-f7f7f7 padding40">
							<view class="flex-column" v-for="(val,i) in item.dataDetails" :key="i">
								<view class="margin-bottom_10rpx font-weight_bold">
									<text style="color: rgb(51, 51, 51);">￥</text>
									<text
										style="color:rgb(51, 51, 51);font-size: 28rpx;">{{(val.number)}}</text>
								</view>

								<view style="color: rgb(102, 102, 102);font-size: 28rpx; " class="flex">
									<text>{{val.text}}</text>
									<image class="arrowImg" src="../../static/会员卡管理端/path (1).png" mode=""></image>
								</view>
							</view>
						</view>
						<!-- <view class="padding20 border-bottom-ECECEC">
							所属门店：哇哈哈沈阳中央世纪店
						</view> -->
						<view class=" flex-between " style="padding: 20rpx 20rpx 0;">
							<text style="color: rgb(95, 93, 93);">创建时间：{{item.create_time}}</text>
							<view class="myEmployeesBtn flex" @click="showDelModify(item)">
								管理员工
							</view>
						</view>

					</view>
				</view>
			</block>
		</mescroll-body>
		<!-- 添加悬浮 -->
		<view class="suspension" @click="addEmployeeSuspension()">
			<image class="addIcon" src="../../static/会员卡管理端/addIcon.png" mode=""></image>
		</view>

		<sunui-popup ref="modifyActivity">
			<template v-slot:content>


				<view class="moreActiveButton">
					<view class="add" @click="modifyPassword()">
						修改密码
					</view>
					<view class="add" style="color: rgb(255, 51, 38);" @click="deleteEmployees()">
						删除店员
					</view>

					<view class="add" @click="cancelFn()">
						取消
					</view>
				</view>

			</template>
		</sunui-popup>
		<sunui-popup ref="myPackagePopup">
			<template v-slot:content>

				<view class="">
					<view style="text-align: center;" class="font-weight_bold">
						注册员工账号
					</view>
					<view class="addEmployee">
						<uni-forms :rules="rulesWxForm" ref="form" :modelValue="form" label-position="top">

							<uni-forms-item label="员工姓名" name="name" required labelWidth="180px">
								<uni-easyinput trim="all" v-model="form.name" placeholder="请输入员工姓名" />

							</uni-forms-item>
							<uni-forms-item label="联系电话" name="phone" required labelWidth="180px">
								<uni-easyinput type='number' maxlength="11" trim="all" v-model="form.phone"
									placeholder="请输入联系电话" />

							</uni-forms-item>
							<uni-forms-item label="真实姓名" name="real_name" required labelWidth="180px">
								<uni-easyinput maxlength="11" trim="all" v-model="form.real_name"
									placeholder="请输入联系电话" />

							</uni-forms-item>

							<uni-forms-item label="选择上级管理" name="superior" labelWidth="180px">
								<picker mode="selector" @change='superiorFn' :range="superiorList" :range-key="'text'">
									<view class="arrowSuperior">
										<uni-easyinput disabled maxlength="11" trim="all" v-model="superior"
											placeholder="请选择所属上级是谁" />
										<uni-icons class="arrows" type="right" size="15"></uni-icons>
									</view>
								</picker>
							</uni-forms-item>
							<picker mode="selector" @change='classifyFn' :range="merchantRoleList" :range-key="'text'">
								<uni-forms-item label="员工角色" name="merchantRole" required labelWidth="180px">

									<view class="arrowSuperior">
										<uni-easyinput disabled trim="all" v-model="form.merchantRole"
											placeholder="请选择你属于什么角色" />
										<uni-icons class="arrows" type="right" size="15"></uni-icons>
									</view>

								</uni-forms-item>
							</picker>
							<uni-forms-item label="登录密码" name="password" required labelWidth="180px">
								<uni-easyinput type="password" trim="all" v-model="form.password"
									placeholder="请输入登录密码" />

							</uni-forms-item>

							<view class="sumbit-btn flex" @click="saveInfo('form')">
								确定注册
							</view>


						</uni-forms>
					</view>


				</view>

			</template>
		</sunui-popup>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				downOption: {
					auto: true
				},
				// 上拉配置项
				upOption: {
					auto: true
				},
				token: uni.getStorageSync('login').token,
				windowHeight: '',
				list: [],
				tabIndex: 4,
				searchVal: '',

				dataDetails: [{
						number: 251321.32,
						text: '订单数量'
					},

					{
						number: 3.00,
						text: '成交金额'
					},
					{
						number: 18000,
						text: '套餐卡核销次数'
					},

				],

				form: {
					// 员工姓名
					name: '',
					// 电话
					phone: '',
					// 登录账号
					real_name: '',
					// 密码
					password: '',
					// 员工角色
					role_id: "",
					// 上级员工
					pid: "",
					merchantRole: '',

				},
				formUpdate: {

				},
				updata: false,
				merchantRoleList: [],
				employeeData: null,
				superiorList: [],
				superior: '',
				rulesWxForm: {
					name: {
						rules: [{
							required: true,
							errorMessage: '请输入员工姓名'
						}]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '请输入联系电话'
						}]
					},
					real_name: {
						rules: [{
							required: true,
							errorMessage: '请输入真实姓名'
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '请输入登录密码'
						}]

					},
					merchantRole: {
						rules: [{
							required: true,
							errorMessage: '请选择你的员工角色'
						}]

					},


				},
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight * 2 - 800;
				}
			});
			this.init()
		},
		mounted() {



		},
		onShow() {

			this.$at.releaseKey('submit');
			this.mescroll?.resetUpScroll();
		},
		methods: {
			cancelFn() {
				this.$refs.modifyActivity.close()
			},
			// 修改密码
			modifyPassword() {
				this.$refs.modifyActivity.close()
				this.$sun.navGo('/pages/myEmployees/modifyEmployeePassword', {
					...this.employeeData
				})
			},
			deleteEmployees() {
				uni.showModal({
					title: '提示',
					content: '是否删除该员工',
					success: async (res) => {
						if (res.confirm) {

							const result = await this.$http.post({
								url: this.$api.delStaff,
								data: {
									id: this.employeeData.id,


								},
								headers: {
									'Authorization': `Bearer ${this.token}`
								}

							})
							if (result.code == 0) {
								this.$refs.modifyActivity.close()
								this.$nextTick(() => {
									this.mescroll?.resetUpScroll();
								})
								this.$sun.toast(result.msg, 'none')
							} else {
								this.$sun.toast(result.msg, 'none')
							}
						} else if (res.cancel) {

						}
					}
				});
			},

			classifyFn(e) {

				this.form.role_id = this.merchantRoleList[e.detail.value].value
				console.log(this.form.role_id, this.merchantRoleList[e.detail.value].text)

				this.form.merchantRole = this.merchantRoleList[e.detail.value].text

			},
			superiorFn(e) {

				this.form.pid = this.superiorList[e.detail.value].value

				this.superior = this.superiorList[e.detail.value].text
				console.log(this.form.pid, this.superior)
			},
			async init() {
				// 查询分类列表
				const result = await this.$http.get({
					url: this.$api.merchantRole,
					data: {


					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})
				if (result.code == 0) {
					const classifyData = result.data.map((item) => {
						return {
							text: item.name,
							value: item.id
						}
					})
					this.merchantRoleList = classifyData



				} else {
					this.$sun.toast(result.msg, 'none')
				}


			},
			changeInput(e) {
				this.searchVal = e.detail.value
				this.mescroll?.resetUpScroll();
			},
			async upCallback(scroll) {

				const result = await this.$http.get({
					url: this.$api.myStaff,
					data: {
						page: scroll.num,
						limit: 10,
						account: this.searchVal?this.searchVal:''

					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})
				if (result.code == 0) {
					console.log('地址管理列表', result);
					this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
					if (scroll.num == 1) this.list = [];
					this.list = this.list.concat(result.data.list);

                   
					this.list.forEach((val,i)=>{
						this.dataDetails.forEach((item) => {
							// console.log(val)
							switch (item.text) {
								case '订单数量':
									item.number = val.order_count;
									break;
								case '成交金额':
									item.number = val.amount;
									break;
								case '套餐卡核销次数':
									item.number = val.package_use_count;
									break;
								
									// 可根据实际情况继续添加其他匹配条件
							}
						})
						this.list[i].dataDetails=JSON.parse(JSON.stringify(this.dataDetails))
					})
					
					console.log(this.list)
					const classifyData = this.list.map((item) => {
						return {
							text: item.name,
							value: item.id
						}
					})
					this.superiorList = classifyData
					// console.log('this.list', this.list, this.list.length, this.superiorList);
				}
			},
			addEmployeeSuspension() {
				this.$refs.myPackagePopup.show({
					style: 'background-color:#fff;width:642rpx;border-radius:10rpx;padding:50rpx;',
					bottomClose: false,
					shadeClose: true,
					topclose: true
				});
			},
			// 显示修改删除按钮
			showDelModify(item) {

				this.employeeData = item
				// 显示下拉框
				this.$refs.modifyActivity.show({
					anim: 'bottom',
					position: 'bottom',
					shadeClose: true, //false使用户不能点击其它关闭页面
					topclose: false
				});
			},

			saveInfo(formName) {

				this.$refs[formName].validate((err, formData) => {
					// 如果校验成功 ，err 返回 null
					if (err) {
						console.log(err, formData)
						return
					} else {

						this.$at.uniDoFunc({
							key: 'submit',
							success: async () => {
								this.$at.lockKey('submit');
								console.log(this.form)
								if (this.form.hasOwnProperty('merchantRole')) {
									delete this.form.merchantRole;
								}
								const result = await this.$http.post({
									url: this.$api.addStaff,
									data: {
										...this.form

									},
									headers: {
										'Authorization': `Bearer ${this.token}`
									}

								})
								if (result.code == 0) {
									this.$sun.toast(result.msg, 'none')
									this.$at.releaseKey('submit');
									setTimeout(() => {
										this.$sun.navBack()
									}, 800)
								} else {
									this.$sun.toast(result.msg, 'none')
									this.$at.releaseKey('submit');
								}

							}
						})


					}
					console.log('error', err)
				}).then(async res => {



				})

			},

		},
		computed: {
			totelName: function() {
				return function(num) {

					if (num >= 10000) {
						let remainder = num % 10000;
						let quotient = Math.floor(num / 10000);
						let decimal = Math.floor(remainder / 1000);
						return quotient + '.' + decimal + '万';
					} else {
						return num.toString();
					}
				};
			}
		},
	}
</script>

<style lang="less" scoped>
	page {
		background: #f6f6f6;
	}

	.addEmployee {

		// padding: 45rpx;
		.arrowSuperior {
			position: relative;

			.arrows {
				position: absolute;
				right: 10rpx;
				top: 50%;
				transform: translateY(-50%);
			}
		}

		.sumbit-btn {




			height: 100rpx;
			color: #fff;
			border-radius: 10px;

			background-color: #1890FF;
		}
	}

	.flex-center() {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.moreActiveButton {


		background-color: #fff;


		.add {
			height: 100rpx;

			font-size: 28rpx;
			font-family: Inter;

			.flex-center();
			border: 1px solid #f7f7f7;


		}

		.delete {
			.flex-center();
			height: 100rpx;


			color: #FF4636;
			font-size: 28rpx;
			font-family: Inter;
			box-shadow: 2rpx 2rpx 2rpx 30rpx 30rpx rgba(238, 238, 238, 1.0);
		}


	}

	.myEmployeesPage {
		.myEmployeesTop {
			background: rgb(255, 255, 255);

			padding: 34rpx;
			// border-radius: 130rpx;


			.search-content {
				justify-content: center;
				display: flex;
				align-items: center;
				// width: 446rpx;
				height: 88rpx;

				background: rgb(246, 248, 255);
				;
				border-radius: 84rpx;

				.search-img {
					width: 30rpx;
					height: 30rpx;
					margin-right: 20rpx;
					margin-left: 40rpx;
				}

				.icon_close {
					padding: 0rpx 15rpx;
					width: 36rpx;
					height: 36rpx;
					margin-right: 30rpx;
				}
			}
		}

		.myEmployeesList {
			background: rgb(255, 255, 255);
			margin-top: 44rpx;
			padding: 30rpx;

			.image {
				width: 116rpx;
				height: 116rpx;
			}

			;

			.arrowImg {
				width: 24.5rpx;
				height: 24.5rpx;
				margin-left: 5rpx;
			}

			width: 750rpx;

			.myEmployeesBtn {
				width: 148.4rpx;
				height: 56.06rpx;
				box-sizing: border-box;
				border: 1px solid rgb(190, 190, 190);
				border-radius: 100px;
				color: rgb(102, 102, 102);

			}
		}

		.suspension {
			position: fixed;
			right: 15rpx;
			width: 96rpx;
			bottom: 140rpx;
			height: 96rpx;
			border-radius: 50%;
			background-color: #fff;
			text-align: center;
			line-height: 126rpx;
			z-index: 999;
			filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.15));

			.addIcon {

				width: 50rpx;
				height: 50rpx;
			}
		}

	}
</style>